<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {Delete, Edit, Plus, Search} from '@element-plus/icons-vue'
import api from "@/api/index.js";
import {MdEditor} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';


/*分类数组*/
const sortkv = ref([[1, "安全"], [2, "运维"], [3, "运维"], [4, "k8s"], [5, "安全"], [6, "运维"], [7, "运维"], [8, "k8s"], [9, "运维"], [10, "运维"], [11, "k8s"], [12, "安全"], [13, "运维"], [14, "运维"], [15, "k8s"], [16, "运维"], [17, "运维"], [18, "k8s"], [19, "安全"], [20, "运维"], [21, "运维"], [22, "k8s"]])

/*当前第几页数*/
function CurrentPage(val) {
  console.log('查询当前页数', val)
  /*执行查询*/
  api.getArt({
    params: {
      page: val,
      pageSize: PageSize.value
    }
  }).then(
      res => {
        tableData.value = res.data.data
        ToTal.value = res.data.total
        console.log(tableData.value)

      }
  ).catch(
      res => {
        if (res.code !== 200) {
          console.log(res.data)
        }
      }
  )
}

/*当前分页默认的条数*/
const PageSize = ref(14)
/*当前数据总数*/
const ToTal = ref(0)


/*文章添加表单格式*/
let form = reactive({
  id: 0,
  title: '',
  sortId: 0,
  open: 1,
  desc: '',
  content: '',


})
/*添加,更新文章按钮*/
const addform = () => {
  if (form.id > 0) {
    console.log("这是个编辑", form.id)

    api.upArt(form).then(
        (res) => {
          if (res.data.code === 200) {
            /*添加成功 关闭对话窗*/
            ElMessage({
              message: '文章更新成功!',
              type: 'success',
            })

            /*关闭添加窗口*/
            addForm.value = false
          }
          console.log("文章更新成功", res.data)

        }
    )

    return
  }

  api.addArt(form).then(
      (res) => {
        if (res.data.code === 200) {
          /*添加成功 关闭对话窗*/
          ElMessage({
            message: '文章添加成功!',
            type: 'success',
          })

          /*关闭添加窗口*/
          addForm.value = false
        }
        console.log("文章添加成功", res.data)

      }
  )


  addForm.value = true
}

/*定义添加按钮*/
const addForm = ref(false)


/*定义表*/
const tableData = ref([])
/*定义搜索*/
const search = ref('')


/*定义搜索过滤*/
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.desc.toLowerCase().includes(search.value.toLowerCase())
    )
)


/*打开 刷新网页 查询当前页面的数据默认执行*/
onMounted(() => {
  /*执行查询*/
  api.getArt({
    params: {
      page: 1,
      pageSize: PageSize.value
    }
  }).then(
      res => {
        tableData.value = res.data.data
        ToTal.value = res.data.total
        console.log(tableData.value)

      }
  ).catch(
      res => {
        if (res.code !== 200) {
          console.log(res.data)
        }
      }
  )
})

/*删除按钮*/
function handleDelete(index, row) {
  console.log(index, row)

  /*执行删除*/
  api.delArt(row).then(
      (res) => {
        if (res.data.code === 200) {
          /*添加成功 关闭对话窗*/
          ElMessage({
            message: '删除成功!',
            type: 'success',
          })
        }
        console.log("文章更新成功", res.data)
      }
  )

}


/*调用编辑对话框*/
function handleEdit(index, row) {
  console.log(index, row)

  /*开启对话框*/
  addForm.value = true
  /* 赋值*/
  form = row


}

/*关闭窗口自动清理*/
function addDialogClose() {
  form = reactive({})

}

</script>

<template>


  <el-card class="table-tr" shadow="always">

    <el-space wrap>
      <!--   ------------------------------------------------ 搜索框  -->
      <div class="search-tr">
        <el-input v-model="search" :clearable="true" :suffix-icon="Search"
                  placeholder="搜索描述内容"

                  type="text"/>
      </div>
      <!--------------------------------------------------------添加按钮-->
      <div class="add-art">
        <el-button :icon="Plus" round type="primary" @click="addForm = true">添加文章</el-button>
      </div>
    </el-space>
    <!-- ----------------------------------------添加文章表单  分割线-----------------------------------------------------------------------------------  -->
    <el-dialog v-model="addForm" :destroy-on-close="true" title="添加文章" top="0" width="1100" @close="addDialogClose">


      <el-form :model="form">
        <el-space :size=100>
          <el-form-item label="id">
            <el-input v-model="form.id" disabled style="width: 80px"/>
          </el-form-item>
          <el-form-item label="文章">
            <el-input v-model="form.title" style="width: 400px"/>
          </el-form-item>
          <el-form-item label="开放">

            <el-switch v-model="form.open"
                       :active-value=1
                       :inactive-value=0
                       active-text="公开"
                       inactive-text="私密"
                       inline-prompt/>
          </el-form-item>
        </el-space>
        <el-form-item label="分类" type="number">

          <el-radio-group v-for="i in sortkv" :key=i v-model="form.sortId">

            <el-radio :label=i[0] style="width: 60px">{{ i[1] }}</el-radio>

          </el-radio-group>
        </el-form-item>

        <el-form-item label="描述">
          <el-input v-model="form.desc"/>
        </el-form-item>
        <el-form-item label="内容">
          <MdEditor v-model="form.content"/>
        </el-form-item>
      </el-form>

      <template #footer>

        <span class="dialog-footer">
          <!--       返回按钮 -->
          <el-button round @click="addForm = false">返回</el-button>
          <!--       添加按钮 -->
          <el-button :loading="false" round type="primary" @click="addform">
           {{ form.id > 0 ? '更新' : '添加' }}
          </el-button>
        </span>

      </template>

    </el-dialog>
    <!-- ------------------------------------添加文章表单  分割线-----------------------------------------------------------------------------------  -->

    <!--   -------------------------------------------------------------------------------- 判断拿取数据-->
    <div v-if="tableData.length<1" v-loading="true"></div>

    <!--------------------------------------------------------------------------------------------------------表格-->
    <div v-else>
      <el-table :cell-style="{textAlign: 'center' }"
                :data="filterTableData"
                :header-cell-style="{ background: '#e0dddd', color: '#555',  textAlign: 'center' }"
                style="width: 100%">
        <el-table-column label="id" prop="id" width="100"/>
        <el-table-column label="标题" prop="title" show-overflow-tooltip width="130"/>
        <el-table-column label="分类" prop="sortId" width="100"/>
        <el-table-column label="描述" prop="desc" show-overflow-tooltip width="280"/>
        <el-table-column label="状态" prop="open" width="100">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <!--   ----------------------------------------------------------------------         通过判断复制类型 标签-->
              <el-tag :type="scope.row.open===1?'':'warning'" size="large"
                      style="margin-left: auto;margin-right: auto;">
                {{ scope.row.open === 1 ? '公开' : '私密' }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create" width="200"/>
        <el-table-column label="更新时间" prop="update" width="200"/>
        <!--操作标签-->
        <el-table-column label="操作" width="480">
          <template #default="scope">
            <!--      ------------------------------------------------------------------------------    编辑按钮  -->
            <el-button
                :icon="Edit"
                round

                @click="handleEdit(scope.$index, scope.row)"
            >编辑
            </el-button>

            <!-- ----------------------------------------------------------------------------         删除按钮  -->
            <el-button
                :icon="Delete"
                round
                type="danger"

                @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--------------------------------------------------------------------分页---------------------------------------------------------------->
    <div style="position: fixed;bottom: 50px;">
      <!--     添加中文 局部变量 -->
      <el-config-provider :locale="zhCn">


        <el-pagination

            :page-size="PageSize"
            :total="ToTal"
            background
            layout="total, prev, pager, next"
            small
            @update:current-page="CurrentPage"

        />
      </el-config-provider>
    </div>

  </el-card>

</template>

<style scoped>


.add-art {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 88px;

}

.search-tr {
  width: 200px;

}


.table-tr {
  width: 100%;
  height: 100%;

}
</style>